<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>
        div{
            margin-bottom:20px;
        }

        .text{
            border:1px solid #000;
            height:20px;
            line-height:20px;
            width:600px;
        }

        td{
            padding-top:20px;
        }

        .label{
            font-size:20px;
        }


    </style>
</head>
<body>

    <form action="/search" method="post">
        <h2>predict delivery id</h2>
        <table>
            <tbody>
                <tr>
                    <td class="label">sender:</td>
                    <td><input type="text" class="text" name="sender" id="sender"></td>
                </tr>
                <tr>
                    <td class="label">subject:</td>
                    <td><input type="text" class="text"  name="subject" id="subject" ></td>
                </tr>
                <tr>
                    <td class="label">fileName:</td>
                    <td><input type="text" class="text"  name="fileName" id="fileName"></td>
                </tr>
            </tbody>
        </table>
        <p style="margin-top:20px;">
            <input id="btnGetData" name="btnGetData" type="button" value="查询" style="width:100px;">
        </p>

        <div>
            <h2>predict result:</h2>
            <div id="predictInfoDiv" style="border:1px solid blue;width:500px;">
                <p>
                    <span style="font-weight:bold;margin-right:10px;">delivery id is:</span><span id="deliveryId"></span>
                </p>
                <p>
                    <span style="font-weight:bold;margin-right:10px;">accuracy is:</span><span id="accuracy"></span>
                </p>
				<p>
					<span>if accuracy is less than 0.9, the predict delivery id maybe is error</span>
				</p>
            </div>
        </div>

        <div>
            <h2>api format:</h2>
            <p>method='post'</p>
            <p>url='http://10.86.16.248:8000/search/'</p>
            <p>json object = {"sender":"multi.client.aibbny@bnymellon.com",
                               "subject":"Invesco STIC EUR Liquidity daily nav/factor/yield information - 03/25/2019",
                               "fileName":"INVESCO _Invesco STIC Global Series EUR_PRICESHEET_II_20190325.xls"}</p>
        </div>

        <div>
            <h2>test demo content:</h2>
            <p>sender: <span>multi.client.aibbny@bnymellon.com</span></p>
            <p>subject: <span>Invesco STIC EUR Liquidity daily nav/factor/yield information - 03/25/2019</span></p>
            <p>fileName: <span>INVESCO _Invesco STIC Global Series EUR_PRICESHEET_II_20190325.xls</span></p>
        </div>


    </form>

    <script type=text/javascript src="./../static/js/jquery.min.js"></script>
    <script type=text/javascript>

            //----------------ajax
            function ajax(){
                var ajaxData = {
                  type:arguments[0].type || "GET",
                  url:arguments[0].url || "",
                  async:arguments[0].async || "true",
                  data:arguments[0].data || null,
                  dataType:arguments[0].dataType || "json",
                  contentType:arguments[0].contentType || "application/json",
                  beforeSend:arguments[0].beforeSend || function(){},
                  success:arguments[0].success || function(){},
                  error:arguments[0].error || function(){}
                }
                ajaxData.beforeSend();
                var xhr = createxmlHttpRequest();
                xhr.responseType=ajaxData.dataType;
                xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);
                xhr.setRequestHeader("Content-Type",ajaxData.contentType);
                xhr.send(convertData(ajaxData.data));
                xhr.onreadystatechange = function() {
                  if (xhr.readyState == 4) {
                    if(xhr.status == 200){
                      ajaxData.success(xhr.response);
                    }else{
                      ajaxData.error();
                    }
                  }
                }
            }

            function createxmlHttpRequest() {
              if (window.ActiveXObject) {
                return new ActiveXObject("Microsoft.XMLHTTP");
              } else if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
              }
            }

            function convertData(data){
              if( typeof data === 'object' ){
                var convertResult = "" ;
                for(var c in data){
                  convertResult+= c + "=" + data[c] + "&";
                }
                convertResult=convertResult.substring(0,convertResult.length-1)
                return convertResult;
              }else{
                return data;
              }
            }

            //----------------end ajax


        $(function(){

            $("#btnGetData").click(function(){

                $("#deliveryId").text('');
                $("#accuracy").text('');

                var sender= $("#sender").val();
                var subject= $("#subject").val();
                var fileName= $("#fileName").val();

                var content = sender + subject + fileName;
                if(content ==null || content.length <1){
                    alert("please input search condition");
                    return false;
                }

                var obj = new Object();
                obj.sender = sender;
                obj.subject = subject;
                obj.fileName = fileName;

                var url='http://10.86.16.248:8000/search/';
                var dataInfo=JSON.stringify(obj)



                /*ajax({
                      type: "POST",
                      url: url,
                      dataType: "json",
                      data: dataInfo,
                      //contentType:"application/x-www-form-urlencoded",
                      contentType:"application/json",
                      beforeSend: function() {
                        //some js code
                      },
                      success: function(data) {
                        console.log('--------ajax');
                        var result = data;

                        if(result.apiCode ===1){
                            $("#deliveryId").text(data.deliveryId);
                            $("#accuracy").text(data.accuracy);
                        }else{
                            alert("error: " + result.message);
                        }
                      },
                      error: function() {
                        alert('error');
                      }
                    }); */


                $.ajax({
                    url:url,
                    data:dataInfo,
                    dataType:'json',
                    type:'post',
                    contentType:"application/json",
                    traditional: true,
                    success:function(data){
                        console.log('--------ajax');
                        var result = data;

                        if(result.apiCode ===1){
                            $("#deliveryId").text(data.deliveryId);
                            $("#accuracy").text(data.accuracy);
                        }else{
                            alert("error: " + result.message);
                        }
                    },
                    error:function(){
                        alert('error');
                    }
                })

            })


        })

    </script>

</body>
</html>